<template>
    <!-- 成效分布 -->
    <div>
        <!-- <div id="main"></div> -->
        <div class="chart">
            <div id="main"></div>
        </div>
        <!-- <el-empty description="空白区"></el-empty> -->
    </div>
</template>

<script>
export default {
    data() {
        return {

        }

    },
    methods: {
        chart() {
            // var chartDom = document.getElementById('main')
            var chartDom = document.getElementById('main');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                legend: {
                    top: 'top'
                },
                series: [
                    {
                        name: '成效分布图',
                        type: 'pie',
                        radius: [60, 200],
                        // center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 18
                        },
                        data: [
                            { value: 80, name: '标准化' },
                            { value: 58, name: '培训' },
                            { value: 32, name: '风险' },
                            { value: 30, name: '隐患' },
                            { value: 18, name: '应急' },
                            // { value: 26, name: 'rose 6' },
                            // { value: 22, name: 'rose 7' },
                            // { value: 18, name: 'rose 8' }
                        ]
                    }
                ]
            };
            option && myChart.setOption(option);
        },


    },
    mounted() {
        this.chart();
    },
};
</script>
<style>
.chart {
    display: flex;
    justify-content: center;
    align-items: center;
}



#main {
    /* position: relative;
    left: auto;
    top: 50%; */
    width: 600px;
    height: 600px;
}
</style>